<template>
  <div>
    <span class="name"> 按省份选择： </span>
    <m-select
      :list="provinceList"
      title="省份"
      :value="province"
      :showWarpperActive="provinceActive"
      @change_active="changeprovinceActive"
      @change="changeProvince"
      mclass="province"
    />
    <m-select
      :list="cityList"
      title="城市"
      :value="city"
      :showWarpperActive="cityActive"
      @change_active="changeCityActive"
      @change="changeCity"
      :disabled="cityDisabled"
      mclass="city"
    />
    <span>直接搜索：</span>
    <el-select
      v-model="searchWord"
      filterable
      remote
      reserve-keyword
      placeholder="请输入关键词"
      :remote-method="remoteMethod"
      :loading="false"
    >
      <el-option
        v-for="item in searchList"
        :key="item"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
import MSelect from "./select";
import api from "../../api/index";
export default {
  created() {
    api.getProvince().then((res) => {
      this.provinceList = res.data.data.map((item) => {
        item.name = item.provinceName;
        return item;
      });
    });
  },
  data() {
    return {
      provinceList: [],
      province: "省份",
      provinceActive: false,
      cityList: [],
      city: "城市",
      cityActive: false,
      searchList: ["山东", "甘肃", "黑龙江", "沈阳", "河南"],
      searchWord: "",
      cityDisabled: true,
    };
  },
  components: {
    MSelect,
  },
  methods: {
    changeprovinceActive(flag) {
      this.provinceActive = flag;
      if (flag) {
        this.cityActive = false;
      }
    },
    changeCityActive(flag) {
      this.cityActive = flag;
      if (flag) {
        this.provinceActive = false;
      }
    },
    changeProvince(value) {
      this.province = value.name;
      this.cityDisabled = false;
      this.cityList = value.cityInfoList;
    },
    changeCity(value) {
      this.city = value.name;
      this.$store.dispatch("setPosition", value.name);
    },

    // eslint-disable-next-line no-unused-vars
    remoteMethod(val) {
      // 请求后端数据
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/css/changecity/select.scss";
@import "@/assets/css/changecity/iselect.scss";
</style>
